<template ref="datadictForm">
  <div class="app-container">

      <el-table max-height="550px"
        :data="tableData"
        ref="table"
        border="border"
        v-loading="loading"
        :row-style="tableRowStyle"
        @selection-change="handleSelectionChange"
        @row-click="rowClick"
         >
        <el-table-column v-hasPermi="['reportworld:database:data:comparedata','reportworld:detail:data:comparedata','reportworld:table:data:comparedata','reportworld:datasql:data:comparedata']"
                         label="操作" align="center" width="100" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="vieCompareData(scope.row)"
              v-hasPermi="['reportworld:database:data:comparedata','reportworld:detail:data:comparedata','reportworld:table:data:comparedata','reportworld:datasql:data:comparedata']"
            >详情</el-button>
          </template>
        </el-table-column>
        <el-table-column v-for="item in headList"
                         align="center"
                         show-overflow-tooltip
                         :width="item.width"
                         :prop="item.prop"
                         :key="item.id"
                         :label="item.label"
                         :sortable="'custom'" :sort-orders="['descending', 'ascending']">
          <template slot-scope="scope">
            <dict-tag v-if="item.tableName =='REPORT_WORLD_TABLE' && item.prop == 'LAYERED'" :options="dict.type.report_table_layered" :value="scope.row.LAYERED"/>
            <dict-tag v-else-if="item.tableName =='REPORT_WORLD_TABLE' && item.prop == 'FTYPE'" :options="dict.type.report_table_ftype" :value="scope.row.FTYPE"/>
            <dict-tag v-else-if="item.tableName =='REPORT_WORLD_TABLE' && item.prop == 'FSOURCE'" :options="dict.type.report_table_fsource" :value="scope.row.FSOURCE"/>
            <dict-tag v-else-if="item.tableName =='REPORT_WORLD_TABLE_DETAIL' && item.prop == 'COLUMN_TYPE'" :options="dict.type.column_type" :value="scope.row.COLUMN_TYPE"/>
            <dict-tag v-else-if="item.tableName =='REPORT_WORLD_TABLE_DETAIL' && item.prop == 'PRIMARY_KEY'" :options="dict.type.sys_yes_no" :value="scope.row.PRIMARY_KEY"/>
            <dict-tag v-else-if="item.tableName =='REPORT_WORLD_TABLE_DETAIL' && item.prop == 'BUSINESS_PRIMARY_KEY'" :options="dict.type.sys_yes_no" :value="scope.row.BUSINESS_PRIMARY_KEY"/>
            <dict-tag v-else-if="item.tableName =='REPORT_WORLD_TABLE_DETAIL' && item.prop == 'COLUMN_NULL'" :options="dict.type.sys_yes_no" :value="scope.row.COLUMN_NULL"/>
            <dict-tag v-else-if="item.tableName =='REPORT_WORLD_TABLE_DETAIL' && item.prop == 'MATCHER_CHINESE_CONTENT'" :options="dict.type.sys_yes_no" :value="scope.row.MATCHER_CHINESE_CONTENT"/>
            <dict-tag v-else-if="item.tableName =='REPORT_WORLD_DATASQL' && item.prop == 'TYPE'" :options="dict.type.datasql_type" :value="scope.row.TYPE"/>
            <dict-tag v-else-if="(item.tableName =='REPORT_WORLD_TABLE' || item.tableName =='REPORT_WORLD_TABLE_DETAIL'|| item.tableName =='REPORT_WORLD_DATASQL')
            && item.prop == 'STATUS'" :options="dict.type.sys_common_status" :value="scope.row.STATUS"/>
            <dict-tag v-else-if="item.prop == 'RW_DB_STATUS'" :options="dict.type.sys_common_status" :value="scope.row.RW_DB_STATUS"/>
            <span v-else>{{scope.row[`${item.prop}`]}}</span>
          </template>
      </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"/>

    <el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal ="false" width="1000px" append-to-body >
      <div style="height:600px;overflow:auto;">
        <el-form :model="addOrUpdateForm" ref="addOrUpdateForm" label-width="150px" :rules="rules">
          <el-row>
            <el-col :span="(item.width > 200 || item.componentType == 'monaco' || item.componentType == 'textarea') ? 24 :12 "
                    v-for="(item, index) in headList" :key="index">
              <el-form-item v-if="item.componentType "  :label="item.label" :prop="item.prop">
                <el-select clearable  v-if="item.tableName =='REPORT_WORLD_TABLE' && item.prop == 'LAYERED'" v-model="addOrUpdateForm[item.prop]">
                  <el-option
                    v-for="dict in dict.type.report_table_layered"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
                <el-select clearable  v-else-if="item.tableName =='REPORT_WORLD_TABLE' && item.prop == 'FTYPE'" v-model="addOrUpdateForm[item.prop]">
                  <el-option
                    v-for="dict in dict.type.report_table_ftype"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>

                <el-select clearable  v-else-if="item.tableName =='REPORT_WORLD_DATASQL' && item.prop == 'TYPE'" v-model="addOrUpdateForm[item.prop]">
                  <el-option
                    v-for="dict in dict.type.datasql_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>

                <el-select clearable  v-else-if="item.tableName =='REPORT_WORLD_TABLE' && item.prop == 'FSOURCE'" v-model="addOrUpdateForm[item.prop]">
                  <el-option
                    v-for="dict in dict.type.report_table_fsource"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>

                <el-select clearable  v-else-if="item.tableName =='REPORT_WORLD_TABLE_DETAIL' && item.prop == 'COLUMN_TYPE'" v-model="addOrUpdateForm[item.prop]">
                  <el-option
                    v-for="dict in dict.type.column_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>

                <el-radio-group  v-else-if="item.tableName =='REPORT_WORLD_TABLE_DETAIL' && item.prop == 'PRIMARY_KEY'" v-model="addOrUpdateForm[item.prop]">
                  <el-radio
                    v-for="dict in dict.type.sys_yes_no"
                    :key="dict.value"
                    :label="dict.value"
                  >{{dict.label}}
                  </el-radio>
                </el-radio-group>

                <el-radio-group  v-else-if="item.tableName =='REPORT_WORLD_TABLE_DETAIL' && item.prop == 'BUSINESS_PRIMARY_KEY'" v-model="addOrUpdateForm[item.prop]">
                  <el-radio
                    v-for="dict in dict.type.sys_yes_no"
                    :key="dict.value"
                    :label="dict.value"
                  >{{dict.label}}
                  </el-radio>
                </el-radio-group>
                <el-radio-group  v-else-if="item.tableName =='REPORT_WORLD_TABLE_DETAIL' && item.prop == 'COLUMN_NULL'" v-model="addOrUpdateForm[item.prop]">
                  <el-radio
                    v-for="dict in dict.type.sys_yes_no"
                    :key="dict.value"
                    :label="dict.value"
                  >{{dict.label}}
                  </el-radio>
                </el-radio-group>
                <el-radio-group  v-else-if="item.tableName =='REPORT_WORLD_TABLE_DETAIL' && item.prop == 'MATCHER_CHINESE_CONTENT'" v-model="addOrUpdateForm[item.prop]">
                  <el-radio
                    v-for="dict in dict.type.sys_yes_no"
                    :key="dict.value"
                    :label="dict.value"
                  >{{dict.label}}
                  </el-radio>
                </el-radio-group>
                <el-radio-group  v-else-if="(item.tableName =='REPORT_WORLD_TABLE' || item.tableName =='REPORT_WORLD_TABLE_DETAIL'|| item.tableName =='REPORT_WORLD_DATASQL')
                 && item.prop == 'STATUS'" v-model="addOrUpdateForm[item.prop]">
                  <el-radio
                    v-for="dict in dict.type.sys_common_status"
                    :key="dict.value"
                    :label="dict.value"
                  >{{dict.label}}
                  </el-radio>
                </el-radio-group>

                <el-input clearable  v-else-if="item.componentType == 'input'" v-model="addOrUpdateForm[item.prop]"></el-input>
                <el-date-picker clearable  v-else-if="item.componentType == 'date'"
                                v-model="addOrUpdateForm[item.prop]"
                                type="date"
                                value-format="yyyy-MM-dd">
                </el-date-picker>
                <el-date-picker clearable v-else-if="item.componentType == 'datetime'"
                                v-model="addOrUpdateForm[item.prop]"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
                <el-select clearable  v-else-if="item.componentType == 'select'" v-model="addOrUpdateForm[item.prop]">
                  <el-option
                    v-for="dict in item.options"
                    :key="dict.keyId"
                    :label="dict.keyName"
                    :value="dict.keyId"
                  />
                </el-select>
                <el-radio-group  v-else-if="item.componentType == 'radio'" v-model="addOrUpdateForm[item.prop]">
                  <el-radio
                    v-for="dict in item.options"
                    :key="dict.value"
                    :label="dict.value"
                  >{{dict.label}}
                  </el-radio>
                </el-radio-group>
                <monaco-editor  v-else-if="item.componentType == 'monaco'"  ref="monacoEditor"  style="border:1px solid #000;"
                               :opts="opts"></monaco-editor>
                <el-input v-else-if="item.componentType == 'textarea'" type="textarea" v-model="addOrUpdateForm[item.prop]"></el-input>
                <editor v-else-if="item.componentType == 'editor'" v-model="addOrUpdateForm[item.prop]" :min-height="192"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="所属模块" prop="MODULAR">
                <treeselect  v-model="addOrUpdateForm.MODULAR"
                            :show-count="true"
                            :multiple="true"
                            :disable-branch-nodes="true"
                            :options="modularTree"
                            placeholder="请选择所属模块"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="所属客户"  prop="CUSTOMER">
                <treeselect  v-model="addOrUpdateForm.CUSTOMER"
                            :show-count="true"
                            :multiple="true"
                            :disable-branch-nodes="true"
                            :options="customerTree"
                            placeholder="请选择所属客户"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="所属报表" prop="REPORT">
                <treeselect  v-model="addOrUpdateForm.REPORT"
                            :show-count="true"
                            :multiple="true"
                            :disable-branch-nodes="true"
                            :options="reportTree"
                            placeholder="请选择所属报表"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="版本号" v-if="this.dataCode !='REPORT_TABLE_CODE' && this.dataCode !='REPORT_TABLE_DETAIL_CODE' && this.dataCode !='REPORT_DATASQL_CODE'"  prop="RW_DB_VERSION">
                <el-select clearable v-model="addOrUpdateForm.RW_DB_VERSION" placeholder="请选择版本号">
                  <el-option
                    v-for="dict in dict.type.report_version"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态" v-if="this.dataCode !='REPORT_TABLE_CODE' && this.dataCode !='REPORT_TABLE_DETAIL_CODE' && this.dataCode !='REPORT_DATASQL_CODE' " prop="RW_DB_STATUS">
                <el-radio-group v-model="addOrUpdateForm.RW_DB_STATUS">
                  <el-radio
                    v-for="dict in dict.type.sys_common_status"
                    :key="dict.value"
                    :label="parseInt(dict.value)"
                  >{{dict.label}}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
    </el-dialog>

  </div>
</template>

<script>
  import { listComparedata} from "@/api/reportworld/comparedata";
  import { getTableRowStyle } from "@/utils/yss";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import monacoEditor from '@/components/SqlEditor';

  export default {
    name: "comparedata",
    props :{
      dataId: {type: String,default: ""},
      dataCode: { type: String,default: ""}
    },
    components: {
      Treeselect,
      monacoEditor
    },
    dicts: ['sys_common_status', 'sys_yes_no','report_version','report_database_type','report_table_layered', 'report_table_fsource','report_table_ftype','column_type','datasql_type'],
    data() {
      return {
        queryParams:{
          pageNum: 1,
          pageSize: 50,
          dataId:null,
          dataCode:null,
        },
        opts: { //编辑器
          value: '',
          readOnly: false, // 是否可编辑
          language: 'sql', // 语言类型
          theme: 'vs', // 编辑器主题
          lineNumbers: "on", // 行号 取值
        },
        // 遮罩层
        loading: true,
        // 显示搜索条件
        showSearch: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 弹出层标题
        title: "",
        dialogVisible: false,
        //列数
        collen: 2,
        //原始列头
        formList: [],
        //展示的列头
        headList: [],
        //表格内容
        tableData: [],
        //校验规则
        rules: {},
        //编辑行数据
        addOrUpdateForm: {},
        updateSelection:[],
        //所属模块
        modularTree : [],
        // 所属客户
        customerTree: [],
        //所属报表
        reportTree: [],
      };
    },
      watch: { //值发生变化重新查询页面数据
        dataId: {
          deep: true,
            handler(val) {
            this.queryParams.dataId=val;
            this.getList();
          }
        },
        dataCode: {
          deep: true,
          handler(val) {
            this.queryParams.dataCode=val;
            this.getList();
          }
        }
      },

    created() {
      this.queryParams.dataCode = this.dataCode;
      this.queryParams.dataId = this.dataId;
      this.getList();
    },
   mounted(){
    },
    methods: {
      /** 查询报表世界字典列表 */
      getList() {
        this.loading = true;
        listComparedata(JSON.stringify(this.queryParams)).then(response => {
        this.formList=response.formList;
        this.tableData=response.rows;
        this.modularTree=response.modularTree;
        this.customerTree=response.customerTree;
        this.reportTree=response.reportTree;
        this.headList = [];
        this.formList.map(x=>{
          if(x.isShow==1){
          this.headList.push(x);
        }
       })
        this.headList = Object.assign([],this.headList)
        this.$nextTick(() => {
          this.$refs.table.doLayout();
      })
        this.loading = false;
      });
      },
      /** 返回按钮操作 */
      handleClose() {
        const obj = { path: "/reportworld/database" };
        this.$tab.closeOpenPage(obj);
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.RW_DB_ID);
        this.single = selection.length!==1
        this.multiple = !selection.length
        this.updateSelection =selection[0];
      },
      /** 数据详细信息 */
      vieCompareData(row) {
        this.title = "数据详细信息";
        this.opts.value= '';
        this.addOrUpdateForm = Object.assign({},row);
        this.headList.map(x=>{
         if(x.componentType == 'monaco'){
            this.opts.value= row[x.prop];
        }
        });
        this.dialogVisible = true;
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('reportworld/database/exportData', {
          ...{"queryJson":JSON.stringify(this.queryParams)}
      }, this.queryParams.code + `${new Date().getTime()}.xlsx`)
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      tableRowStyle({row, rowIndex}){
        return getTableRowStyle(row,rowIndex,this.ids);
      },
      rowClick(row, column, event) { //单击行
        this.$refs.table.toggleRowSelection(row);
      }
    }
  };
</script>

